<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
    ></script>
    <title>动画</title>
    <style>
      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
        position: relative;
      }
      #tools {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="allmap"></div>
    <div id="tools">
      <button id="start">播放动画</button>
      <button id="end">停止播放</button>
    </div>
  </body>
</html>
<script>
  const bmap = new BMapGL.Map("allmap"); // 创建Map实例
  const point = new BMapGL.Point(116.404, 39.915);
  bmap.centerAndZoom(point, 20); // 初始化地图,设置中心点坐标和地图级别(缩放级别)
  bmap.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
  bmap.setTilt(60); // 设置地图初始倾斜角度

  const keyFrames = [
    {
      center: new BMapGL.Point(116.307092, 40.054922), // 地图中心点，默认值为地图当前状态中心点
      zoom: 20, // 地图缩放级别，
      tilt: 50, // 倾斜
      heading: 0, // 旋转
      percentage: 0, // 表示当前关键帧处于动画过程的百分比
    },
    {
      center: new BMapGL.Point(116.307631, 40.055391),
      zoom: 21,
      tilt: 70,
      heading: 0,
      percentage: 0.1,
    },
    {
      center: new BMapGL.Point(116.306858, 40.057887),
      zoom: 21,
      tilt: 70,
      heading: 0,
      percentage: 0.25,
    },
    {
      center: new BMapGL.Point(116.306858, 40.057887),
      zoom: 21,
      tilt: 70,
      heading: -90,
      percentage: 0.35,
    },
    {
      center: new BMapGL.Point(116.307904, 40.058118),
      zoom: 21,
      tilt: 70,
      heading: -90,
      percentage: 0.45,
    },
    {
      center: new BMapGL.Point(116.307904, 40.058118),
      zoom: 21,
      tilt: 70,
      heading: -180,
      percentage: 0.55,
    },
    {
      center: new BMapGL.Point(116.308902, 40.055954),
      zoom: 21,
      tilt: 70,
      heading: -180,
      percentage: 0.75,
    },
    {
      center: new BMapGL.Point(116.308902, 40.055954),
      zoom: 21,
      tilt: 70,
      heading: -270,
      percentage: 0.85,
    },
    {
      center: new BMapGL.Point(116.307779, 40.055754),
      zoom: 21,
      tilt: 70,
      heading: -360,
      percentage: 0.95,
    },
    {
      center: new BMapGL.Point(116.307092, 40.054922),
      zoom: 20,
      tilt: 50,
      heading: -360,
      percentage: 1,
    },
  ];

  const opts = {
    duration: 10000, // 设置每次迭代动画持续时间
    delay: 300, // 设置动画延迟开始时间
    interation: "INFINITE", // 设置动画迭代次数
  };
  const animation = new BMapGL.ViewAnimation(keyFrames, opts); // 初始化动画实例

  // 监听动画开始事件
  animation.addEventListener("animationstart", function (e) {
    console.log("start");
  });
  // 监听动画迭代事件
  animation.addEventListener("animationiterations", function (e) {
    console.log("onanimationiterations");
  });
  // 监听动画结束事件
  animation.addEventListener("animationend", function (e) {
    console.log("end"); // INFINITE 没有end
  });
  // 监听动画中途被终止事件
  animation.addEventListener("animationcancel", function (e) {
    console.log("cancel");
  });
  // 开始动画
  document.getElementById("start").addEventListener("click", function () {
    bmap.startViewAnimation(animation);
  });
  // 停止动画
  document.getElementById("end").addEventListener("click", function () {
    bmap.cancelViewAnimation(animation);
  });
</script>
